<template>
  <a-modal width="30%" v-bind:visible="isShowAdd" :title="title" @ok="onOk" @cancel="onCancel">
    <a-form-model ref="formRef" :model="form" :rules="formRule" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="等级数值" prop="level">
        <a-input placeholder="请输入等级数值" v-model="form.level"></a-input>
      </a-form-model-item>
      <a-form-model-item label="等级名称" prop="name">
        <a-input placeholder="请输入等级名称" v-model="form.name"></a-input>
      </a-form-model-item>
      <a-form-model-item label="升级金额" prop="upgrade_money">
        <a-input placeholder="请输入升级金额" v-model="form.upgrade_money"></a-input>
      </a-form-model-item>
      <a-form-model-item label="显示类型" prop="is_show">
        <a-select v-model="form.is_show" placeholder="请选择显示类型">
          <a-select-option v-for="item in showType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="描述" prop="upgrade_desc">
        <a-textarea v-model="form.upgrade_desc" placeholder="请输入描述状态" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group v-model="form.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addPlanAPI, editPlanAPI } from '@/api/product.js'
export default {
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    object: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    isShowAdd(boolean) {
      if (boolean) {
        this.title = '新增'
        if (Object.values(this.object).length > 0) {
          this.title = '修改信息'
          console.log(this.object)
          this.form.ids = this.object.id
          this.form.is_show = this.object.is_show
          this.form.level = this.object.level
          this.form.name = this.object.name
          this.form.profit_desc = this.object.profit_desc
          this.form.upgrade_money = this.object.upgrade_money
          this.form.status = this.object.status
          this.form.upgrade_desc = this.object.upgrade_desc
        }
      } else {
        this.form = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          ids: '',
          is_show: undefined,
          level: '',
          name: '',
          profit_desc: '',
          sort: '',
          status: 1,
          upgrade_desc: '',
          upgrade_money: ''
        }
        this.$refs.formRef.resetFields()
      }
    }
  },
  data() {
    return {
      title: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        ids: '',
        is_show: undefined,
        level: '',
        name: '',
        profit_desc: '',
        sort: '',
        status: 1,
        upgrade_desc: '',
        upgrade_money: ''
      },
      showType: [
        { id: 0, name: '不显示' },
        { id: 1, name: '线上购买【显示价格】' },
        { id: 2, name: '联系客服【显示价格】' },
        { id: 3, name: '线上购买【隐藏价格】' },
        { id: 4, name: '联系客服【隐藏价格】' }
      ],
      formRule: {
        level: [{ required: true, message: '请输入等级数值' }],
        name: [{ required: true, message: '请输入等级名称' }],
        upgrade_money: [{ required: true, message: '请输入等级名称' }],
        is_show: [{ required: true, message: '请选择显示类型' }],
        upgrade_desc: [{ required: true, message: '请输入描述状态' }]
      }
    }
  },
  methods: {
    onOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          if (this.title === '新增') {
            await addPlanAPI(this.form)
          }
          if (this.title === '修改信息') {
            await editPlanAPI(this.form)
          }
          this.$emit('upload')
          this.$emit('update:isShowAdd', false)
          this.$emit('update:object', {})
          this.title = ''
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    },
    onCancel() {
      this.title = ''
      this.$emit('update:isShowAdd', false)
      this.$emit('update:object', {})
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
</style>
